import React from "react";
import { connect } from "dva";
import { Dispatch } from "../../../../node_modules/redux";
import { Form, Input, Button, Card } from "antd";
import styles from "./index.less";
import { UserOutlined, KeyOutlined, SafetyCertificateOutlined } from "@ant-design/icons";

interface Props {
  dispatch: Dispatch<{ type: string; payload?: any }>;
  loading?: any;
}

const Index: React.FC<Props> = (props: Props): JSX.Element => {
  // const [form] = Form.useForm();
  const { dispatch, loading } = props;

  const formFinish = (value: any) => {
    dispatch({
      type: "login/login",
      payload: value,
    });
  }
  return (
    <div style={{ overflow: "hidden" }}>
      <Card className={styles.login}>
        <div className={styles.title}>欢迎登陆</div>
        <Form className={styles["form-content"] + " qd-form-bttom-15"} onFinish={formFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input
              prefix={<UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="用户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password
              prefix={<KeyOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item name="code">
            <div className={styles["code-input"]}>
              <Input
                prefix={
                  <SafetyCertificateOutlined
                    style={{ color: "rgba(0,0,0,.25)" }}
                  />
                }
                placeholder="验证码"
              />
            </div>
            <img
              className={styles["code"]}
              src="https://picsum.photos/65/32"
              alt=''
            ></img>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              loading={loading}
              htmlType="submit"
              block
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default connect(
  ({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
    loading: loading.effects["login/login"],
  })
)(Index);
